<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<style type="text/css">
			*{background: initial;}
			.much{margin: 20px 24px;color: #333333;font-size: 18px;}
			.muchNum{font-size: 30px;color: #AAAAAA;height: 50px!important;padding-top: 0!important;font-weight: normal;margin-bottom: 0!important;}
			.maxNum{height: 60px;line-height: 60px;margin-left: 25px;color: #666666;font-feature-settings: 14px;}
			.maxNum span:nth-of-type(1){color: #015EFF;}
			.mui-table-view-cell{height: 45px!important;line-height: 25px;}
			.mui-table-view-cell a{font-size: 14px;color: #333333;}
			.rightMargin{margin-right: 20px;font-size: 14px;color: #999999;}
			.rightMarginOther{margin-right: 10px;font-size: 14px;color: #999999;}
			.mui-table-view:after{background: none;}
			.twoNav{height: 85px!important;}
			.twoNav a{display:block;padding-top: 20px!important;}
			.twoNav a p{font-size: 14px;color: #015EFF;}
			#sheet a{color: #333333!important;font-size: 16px!important;}
			#sheet a b{color: #015EFF!important;font-weight: normal!important;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav colorful">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我要借款</h1>
		</header>
		<!--无借款记录-->
		<!--<div class="mui-content">
		    <div class="mui-content-padded">
		    	<div class="repayment">
					<img src="image/icon_stateless.png"/>
					<p>暂无借款明细哦</p>
				</div>
		    </div>
		</div>-->
		<div class="mui-content" >
			<div class="mui-content-padded">
				<div class="isborrowMoney">
					<div class="howmuch">
						<p class='much'>借多少</p>
						<input class="muchNum" type="number" value="" placeholder="￥7200"/>
						<p class="maxNum">最多可借<span class="muchNumVal">7200元</span><span> 利息按天计算</span></p>
					</div>
				</div>
				
			</div>
		</div>
		<div class="mui-content" style="padding-top: 0!important;">
			<div class="mui-content-padded">
				<div class="isborrowMoney">
					<ul class="mui-table-view">
				        <li class="mui-table-view-cell" id="borrowTime">
				            <a class="mui-navigate-right" href="#sheet" >借多久
				            	<span class="mui-pull-right" id="rightMargin">15天</span>
				            </a>
				        </li>
				        <li class="mui-table-view-cell">
				            <a>总利息 
				            	<span class="mui-pull-right rightMarginOther">0.00</span>
				            </a>
				        </li>
				    </ul>
				</div>
			</div>
		</div>
		<div class="mui-content" style="padding-top: 0!important;">
			<div class="mui-content-padded">
				<div class="isborrowMoney">
					<ul class="mui-table-view">
				        <li class="mui-table-view-cell  twoNav">
				            <a class="mui-navigate-right">
				               	 <p>收款账户</p>
				               	 <p style="font-weight: bold;">中国民生银行 4293</p>
				            </a>
				        </li>
				    </ul>
				</div>
			</div>
		</div>
		<div class="mui-content-padded">
			<button class="mui-btn-block login_sginBtn">确认借款</button>
		</div>
		<div id="sheet" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view choose">
				<li class="mui-table-view-cell">
					<p>请选择期限</p>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">10天</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">11天</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">12天</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
//			mui('#sheet').popover('toggle');
			var info = document.getElementById("rightMargin");
			mui('body').on('tap', '.choose li>a', function() {
				var a = this,
					parent;
				//根据点击按钮，反推当前是哪个actionsheet
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if (parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				//关闭actionsheet
				mui('#' + parent.id).popover('toggle');
				info.innerHTML = a.innerHTML;
			})
		</script>
	</body>

</html>